<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="pragram" content="no-cache">
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>视频观看</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/video.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="main" v-cloak>
			<video id="video" width="100%" controls="controls" controlslist="nodownload" :src="return_data.chapter_test_video" :poster="return_data.chapter_pic" v-if="return_data.have_buy === false">
			</video>
			<video id="video" width="100%" controls="controls" controlslist="nodownload" :src="return_data.chapter_video" :poster="return_data.chapter_pic" controlslist="nodownload" v-if="return_data.have_buy === true">
			</video>
			<div class="video_content">
				<span>{{return_data.chapter_no}}&nbsp;{{return_data.chapter_name}}</span>
				<span>播放{{return_data.play_num}}次</span>
			</div>
			<div class="video_hour_title">共{{chapters.length}}个课时</div>
			<div class="video_hour_list">
				<a :href="'curriculum_video.html?id='+chapter.chapter_id+'&course_type='+GetQueryString('course_type')+'&extend_type='+GetQueryString('extend_type')" v-for="chapter in chapters">
					<div class="chapter_list">
						<img :src="chapter.chapter_pic" />
						<span>{{chapter.chapter_no}}&nbsp;{{chapter.chapter_name}}</span>
					</div>
				</a>
			</div>
			<div class="but answer" v-if="return_data.have_buy === true && GetQueryString('course_type') != 7">
				<img src="img/45@2x.png" />
				<span>进入题库</span>
			</div>
			<div class="z"></div>
			<div class="reward" v-if="GetQueryString('course_type') == 7">
				<img src="img/33@3x.png" />
				<p>请打赏观看视频</p>
				<span>￥{{return_data.chapter_price}}</span>
				<span class="ds">打赏</span>
				<!--<span class="close">x</span>-->
			</div>
			<div class="end" v-if="GetQueryString('course_type') != 7">
				<img src="img/43@2x.png" />
				<p v-if="return_data.have_buy === true">课程观看结束是否进入试题回答</p>
				<p v-if="return_data.have_buy === false">购买课程即可观完整视频噢！</p>
				<div>
					<span class="close" v-if="return_data.chapter_test_video != 'http://mdl3.082818.com' || return_data.chapter_video">还想看看</span>
					<span v-if="return_data.chapter_test_video == 'http://mdl3.082818.com' && !return_data.chapter_video">暂无试看</span>
					<span class="answer" v-if="return_data.have_buy === true">立即进入</span>
					<span class="purchase" v-if="return_data.have_buy === false">立即购买</span>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			getOpenId();
			//获取cookie字符串
			var strCookie = document.cookie;
			//将多cookie切割为多个名/值对
			var arrCookie = strCookie.split("; ");
			var token;
			//遍历cookie数组，处理每个cookie对
			for(var i = 0; i < arrCookie.length; i++) {
				var arr = arrCookie[i].split("=");
				//找到名称为userId的cookie，并返回它的值
				if("token" == arr[0]) {
					token = arr[1];
					break;
				}
			}
			var course_type = GetQueryString("course_type")
			//调用获取课程视频接口
			$.ajax({
				url: apiPath + 'course/get-chapter',
				type: 'post',
				dataType: 'json',
				data: {
					open_id: open_id,
					chapter_id: GetQueryString("id"),
					flagsign: 1
				},
				success: function(data) {
					var right = new Vue({
						el: '#main',
						data: {
							return_data: data.returnData,
							chapters: data.returnData.other_chapter
						},
						mounted: function() {
							var video = document.getElementById("video");
							//关闭弹窗
							$(".close").bind("click", function() {
								$("#video").show();
								$(".z").hide();
								$(".reward").hide();
								$(".end").hide();
							});
							//打赏
							$(".ds").bind("click", function() {
								window.location.href = path + 'order.html?course_type=' +
									GetQueryString("course_type") + '&extend_type=' + 0 + '&id=' + GetQueryString("id")
							});
							//立即购买
							$(".purchase").bind("click", function() {
								window.location.href = path + 'order.html?course_type=' +
									GetQueryString("course_type") + '&extend_type=' + GetQueryString("extend_type")
							});
							//进入答题
							$(".answer").bind("click", function() {
								window.location.href = path + 'test/test.html?id=' + data.returnData.paper_id + '&course_type=' + GetQueryString("course_type")
							});

							//视频暂停播放
							var url = 'ws://47.112.96.233:2000';
							video.onclick = function() {
								if(video.paused) {
									video.play();
									socket = new WebSocket(url);
									socket.onopen = function() {
										var content = JSON.stringify({
											type: "in",
											open_id: open_id
										});
										socket.send(content);
									}
								} else {
									video.pause();
									socket.close();
									socket = null;
								}
							}
							//判断是否属于淘转课堂
							if(course_type == 7) {
								if(data.returnData.have_buy == false) {
									video.loop = false;
									$("#video").hide();
									$(".z").show();
									$(".reward").show();
								}
							} else {
								if(data.returnData.chapter_test_video != 'http://mdl3.082818.com' || data.returnData.chapter_video) {
									video.loop = false;
									video.addEventListener('ended', function() {
										$("#video").hide();
										$(".z").show();
										$(".end").show();
										socket.close();
										socket = null;
									}, false);
								} else {
									$("#video").hide();
									$(".z").show();
									$(".end").show();
								}
							}
							//章节里的当前播放视频
							for(var i = 0; i < data.returnData.other_chapter.length; i++) {
								if(data.returnData.other_chapter[i].chapter_id == data.returnData.chapter_id) {
									var j = i + 1;
									$(".video_hour_list>a").eq(i).children().addClass('nowChapter');
									$(".video_hour_list>a").eq(i).children().attr("id", "nowChapter");
								}
							}
							window.location.hash = "nowChapter"
						},
					});
				}
			});
		</script>
	</body>

</html>